import 'dart:convert';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:shopping_list/global.dart';
import 'package:shopping_list/pages/detail.dart';
import 'package:shopping_list/pages/edit.dart';

class ListItem extends StatefulWidget {
  ListItem({Key key, this.id, this.data}) : super(key: key);
  final id;
  final data;
  @override
  State<StatefulWidget> createState() => _ListItemState();
}

class _ListItemState extends State<ListItem> {
  int totalGoods(data) {
    return json.decode(data['goods']).length;
  }

  int checkedGoods(data) {
    return json.decode(data['goods']).where((item) {
      return item['checked'] == '1';
    }).length;
  }

  int percent(data) {
    return checkedGoods(data) * 100 ~/ totalGoods(data);
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => DetailPage(id: widget.id, data: widget.data),
          ),
        );
      },
      child: Container(
        width: MediaQuery.of(context).size.width,
        margin: EdgeInsets.all(10),
        padding: EdgeInsets.all(10),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(6),
          gradient: LinearGradient(
            begin: Alignment.centerLeft,
            end: Alignment.centerRight,
            colors: [
              Global.mainColor,
              Color(0xFFff847c),
            ],
          ),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      Text(
                        widget.data['use'],
                        style: TextStyle(
                          color: Global.backgroundColor,
                          fontWeight: FontWeight.w500,
                          fontSize: 22,
                        ),
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      ),
                      SizedBox(height: 5),
                      Row(
                        children: [
                          Text(
                            widget.data['channel'],
                            style: TextStyle(
                              color: Global.backgroundColor.withOpacity(0.6),
                              fontWeight: FontWeight.w500,
                              fontSize: 15,
                            ),
                          ),
                          SizedBox(width: 15),
                          Text(
                            widget.data['date'],
                            style: TextStyle(
                              color: Global.backgroundColor.withOpacity(0.6),
                              fontWeight: FontWeight.w500,
                              fontSize: 15,
                            ),
                          ),
                        ],
                      )
                    ],
                  ),
                ),
                Container(
                  width: 60,
                  margin: EdgeInsets.only(left: 10),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      Text(
                        '${checkedGoods(widget.data)}/${totalGoods(widget.data)}',
                        style: TextStyle(
                          color: Global.backgroundColor,
                          fontWeight: FontWeight.w500,
                          fontSize: 22,
                        ),
                      ),
                      Container(
                        padding: EdgeInsets.fromLTRB(5, 2, 5, 2),
                        decoration: BoxDecoration(
                          color: Global.backgroundColor,
                          borderRadius: BorderRadius.circular(5),
                        ),
                        child: Text(
                          '${percent(widget.data)}%',
                          style: TextStyle(
                            color: Global.mainColor,
                            fontWeight: FontWeight.w600,
                            fontSize: 12,
                          ),
                        ),
                      ),
                    ],
                  ),
                )
              ],
            ),
            SizedBox(height: 10),
            Text(
              widget.data['remark'],
              style: TextStyle(
                color: Global.backgroundColor.withOpacity(0.9),
                fontWeight: FontWeight.w400,
                fontSize: 17,
              ),
              maxLines: 2,
              overflow: TextOverflow.ellipsis,
            ),
          ],
        ),
      ),
    );
  }
}
